<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

    <script>

        window.onload = function () {
          
            var topInp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var botInpArr = tbody.getElementsByTagName("input");

            //绑定事件
            topInp.onclick = function () {
            	
              
                for(var i=0;i<botInpArr.length;i++){
                	
                    botInpArr[i].checked = this.checked;
                }
            }

           
            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {
                	
                   
                    var bool = true;
                   
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

</head>
<body>
    <div class="wrap">
        <table>
            <thead>
			<tr >
			
				<th><input type="checkbox"  id="theadInp"></th>
				<th>菜名</th>
				<th>饭店</th>
			</tr>
			</thead>
			<tbody id="tbody">
			<tr >
				<td><input type="checkbox"/></td>
				<td>a</td>
				<td>b</td>
					</tr>
			<tr>
			<td><input type="checkbox"/></td>
				<td>a</td>
				<td>b</td>
				
			</tr>
			 
			</tbody>
			
		</table>
    </div>

</body>
</html>